import { TIconType, IconProps } from '@/types';
import React from 'react';
import _ from 'lodash';

const getColor = (type: TIconType) => {
   switch (type) {
      case 'primary':
         // return '#13227a';
         return 'rgba(67, 56, 202, 1)';
      case 'light':
         return '#6366F1';
      case 'white':
         return '#ffffff';
      case 'danger':
         return '#ef6b6b';
      default:
         return '#8f8f8f';
   }
};

function withIconColor(WrappedIcon: React.ComponentType<any>) {
   return function (props: IconProps) {
      const {
         type,
         size = 24,
         isLine = false,
         badge = false,
         className = '',
         onClick = undefined,
         ...others
      } = props;
      const color = getColor(props.type);

      const cls =
         className || `relative flex justify-center items-center h-full`;

      return (
         <span className={cls} onClick={onClick} {...others}>
            {badge && (
               <div className="absolute w-2 h-2 text-[4px] text-white bg-red-500 rounded-full right-0 top-0"></div>
            )}
            <WrappedIcon color={color} size={size} isLine={isLine} />
         </span>
      );
   };
}

export default withIconColor;
